<template>
  <view class="forum-page" :style="{ padding: menuInfo.bottom + 5 + 'px 0rpx 100rpx' }">
    <!-- 背景 -->
    <view class="bg-top"></view>

    <!-- 标签切换栏 -->
    <view class="tab-wrapper">
      <view class="tab-content">
        <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }" @click="switchTab(index)">
          {{ tab.name }}
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-container">
      <swiper class="content-swiper" :current="currentTab" @change="swiperChange">
        <!-- 推荐内容 -->
        <swiper-item class="swiper-item">
          <scroll-view
            scroll-y
            class="scroll-view"
            @scrolltolower="loadMoreRecommend"
            refresher-enabled
            @refresherrefresh="refreshData('recommended')"
            :refresher-triggered="refreshTrigger"
          >
            <PostList
              :posts="recommendPosts"
              :showFollow="true"
              :showLoadMore="true"
              :hasMore="recommendHasMore"
              :loading="recommendLoading"
              @postClick="handlePostClick"
              @followClick="handleFollowClick"
              @tagClick="handleTagClick"
            />
          </scroll-view>
        </swiper-item>

        <!-- 关注内容 -->
        <swiper-item class="swiper-item">
          <scroll-view
            scroll-y
            class="scroll-view"
            @scrolltolower="loadMoreFollow"
            refresher-enabled
            @refresherrefresh="refreshData('following')"
            :refresher-triggered="refreshTrigger"
          >
            <!-- 空状态组件 -->
            <view v-if="followPosts.length === 0 && !followLoading" class="empty-state">
              <view class="empty-content">
                <!-- 空状态图标 -->
                <view class="empty-icon">
                  <view class="pixel-heart">
                    <view class="heart-row heart-row-1"></view>
                    <view class="heart-row heart-row-2"></view>
                    <view class="heart-row heart-row-3"></view>
                    <view class="heart-row heart-row-4"></view>
                    <view class="heart-row heart-row-5"></view>
                  </view>
                </view>

                <!-- 空状态文案 -->
                <view class="empty-text">
                  <text class="empty-title">还没有关注任何人</text>
                  <text class="empty-desc">去广场发现更多有趣的内容吧</text>
                </view>

                <!-- 引导按钮 -->
                <view class="empty-action">
                  <view class="guide-button" @click="goToSquare">
                    <text class="button-text">去广场看看</text>
                    <view class="button-icon">→</view>
                  </view>
                </view>
              </view>
            </view>

            <!-- 关注列表 -->
            <PostList
              v-else
              :posts="followPosts"
              :showFollow="true"
              :showLoadMore="true"
              :hasMore="followHasMore"
              :loading="followLoading"
              @postClick="handlePostClick"
              @followClick="handleFollowClick"
              @tagClick="handleTagClick"
            />
          </scroll-view>
        </swiper-item>

        <!-- 广场内容 -->
        <swiper-item class="swiper-item">
          <scroll-view
            scroll-y
            class="scroll-view"
            @scrolltolower="loadMoreSquare"
            refresher-enabled
            @refresherrefresh="refreshData('square')"
            :refresher-triggered="refreshTrigger"
          >
            <!-- 热门话题区域 - 移动到广场内部 -->
            <view class="hot-topics-wrapper">
              <!-- 话题标题栏 - 移除吸顶效果 -->
              <view class="topic-header">
                <text class="topic-title">热门话题</text>
                <view class="topic-more" @click="navigateTo('/pages/topic/list')">
                  <text>查看更多</text>
                  <tn-icon name="right" size="24"></tn-icon>
                </view>
              </view>

              <!-- 话题网格内容 -->
              <view class="topic-grid-container">
                <view class="topic-grid">
                  <view v-for="(topic, index) in displayTopics" :key="index" class="topic-grid-item" @click="navigateTo(`/pages/topic/detail?id=${topic.id}`)">
                    <image class="topic-img" :src="topic.imgUrl" mode="aspectFill"></image>
                    <view class="topic-info">
                      <text class="topic-name">#{{ topic.post_tag_name }}</text>
                      <text class="topic-count">{{ topic.usage_count }}人讨论</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <!-- 广场帖子列表 -->
            <PostList
              :posts="squarePosts"
              :showFollow="true"
              :showLoadMore="true"
              :hasMore="squareHasMore"
              :loading="squareLoading"
              @postClick="handlePostClick"
              @followClick="handleFollowClick"
              @tagClick="handleTagClick"
            />
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 底部自定义TabBar -->
    <tab-bar></tab-bar>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import TabBar from '@/components/tabbar/TabBar.vue';
import PostList from '@/components/post-list/PostList.vue';
import { onShow } from '@dcloudio/uni-app';

// 页面加载时获取数据
onMounted(() => {
  // 获取微信小程序右上角胶囊按钮信息
  getMenuInfo();
});

// 微信小程序右上角胶囊按钮信息
const menuInfo = ref({
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  width: 0,
  height: 0
});
const getMenuInfo = () => {
  try {
    // 检查是否在微信小程序环境
    if (typeof wx !== 'undefined' && wx.getMenuButtonBoundingClientRect) {
      const rect = wx.getMenuButtonBoundingClientRect();
      if (rect) {
        menuInfo.value = rect;
        // console.log('menuinfo', menuInfo.value);
      }
    }
  } catch (error) {
    console.warn('获取胶囊按钮信息失败:', error);
    // 使用默认值，避免报错
    menuInfo.value = {
      top: 44, // 默认状态栏高度
      bottom: 88,
      left: 0,
      right: 0,
      width: 87,
      height: 32
    };
  }
};

// 标签数据
const tabs = [
  { name: '推荐', id: 'recommended' },
  { name: '关注', id: 'following' },
  { name: '广场', id: 'square' }
];
const currentTab = ref(0);

// 热门话题数据 - 使用s_post_tag表的字段定义
const hotTopics = ref([
  {
    id: 1,
    post_tag_name: '住房分享',
    imgUrl: 'https://picsum.photos/id/1031/200/200',
    usage_count: 45
  },
  {
    id: 2,
    post_tag_name: '活动组局',
    imgUrl: 'https://picsum.photos/id/433/200/200',
    usage_count: 36
  },
  {
    id: 3,
    post_tag_name: '法律签证',
    imgUrl: 'https://picsum.photos/id/175/200/200',
    usage_count: 15
  },
  {
    id: 4,
    post_tag_name: '经验分享',
    imgUrl: 'https://picsum.photos/id/20/200/200',
    usage_count: 12
  },
  {
    id: 5,
    post_tag_name: '求职实习',
    imgUrl: 'https://picsum.photos/id/48/200/200',
    usage_count: 28
  },
  {
    id: 6,
    post_tag_name: '二手交易',
    imgUrl: 'https://picsum.photos/id/26/200/200',
    usage_count: 31
  },
  {
    id: 7,
    post_tag_name: '失物招领',
    imgUrl: 'https://picsum.photos/id/106/200/200',
    usage_count: 19
  },
  {
    id: 8,
    post_tag_name: '校园活动',
    imgUrl: 'https://picsum.photos/id/167/200/200',
    usage_count: 42
  }
]);

// 只显示前4个热门话题
const displayTopics = computed(() => {
  return hotTopics.value.slice(0, 4);
});

// 推荐内容数据
const recommendPosts = ref([
  {
    id: 1,
    userName: '星遇用户1',
    userAvatar: 'https://picsum.photos/id/1025/200/200',
    isAnonymous: false,
    isFollowed: false,
    title: '学校食堂的饭太好吃了',
    content: '今天在食堂又发现了一家超级好吃的档口，麻辣烫味道一级棒，推荐大家去尝尝！价格也很实惠，才18元一份，料也很足。',
    images: ['https://picsum.photos/id/292/200/200', 'https://picsum.photos/id/24/200/200'],
    tags: ['美食推荐', '食堂'],
    createTime: '10分钟前',
    viewCount: 128,
    likeCount: 36,
    commentCount: 9
  },
  {
    id: 2,
    userName: '匿名用户',
    userAvatar: 'https://picsum.photos/id/1005/200/200',
    isAnonymous: true,
    isFollowed: false,
    title: '有人一起组队参加校园歌手大赛吗',
    content: '校园歌手大赛就要开始了，有没有会弹吉他的同学一起组队参加啊？我是主唱，缺个吉他手和键盘手，有意向的私聊我~',
    images: [],
    tags: ['校园活动', '音乐'],
    createTime: '1小时前',
    viewCount: 256,
    likeCount: 48,
    commentCount: 15
  },
  {
    id: 3,
    userName: '星遇用户3',
    userAvatar: 'https://picsum.photos/id/1012/200/200',
    isAnonymous: false,
    isFollowed: true,
    title: '图书馆捡到一张学生卡',
    content: '今天下午在图书馆三楼捡到一张学生卡，户主叫王小明，学号2021110789，请失主看到后联系我，学生卡已经交到图书馆失物招领处。',
    images: ['https://picsum.photos/id/100/200/200'],
    tags: ['失物招领'],
    createTime: '3小时前',
    viewCount: 97,
    likeCount: 21,
    commentCount: 6
  }
]);

// 关注内容数据
const followPosts = ref([]);

// 广场内容数据
const squarePosts = ref([
  {
    id: 4,
    userName: '星遇用户4',
    userAvatar: 'https://picsum.photos/id/1027/200/200',
    isAnonymous: false,
    isFollowed: false,
    title: '想办一场校园市集，有人感兴趣吗？',
    content: '下个月想在学校操场办一场校园市集活动，可以摆摊卖东西、手工DIY、才艺表演等，感兴趣的同学可以来报名参加~',
    images: ['https://picsum.photos/id/119/200/200'],
    createTime: '5小时前',
    viewCount: 342,
    likeCount: 78,
    commentCount: 25,
    tags: ['校园活动', '创意市集']
  },
  {
    id: 5,
    userName: '星遇用户5',
    userAvatar: 'https://picsum.photos/id/1074/200/200',
    isAnonymous: false,
    isFollowed: true,
    title: '校门口新开了家奶茶店，第一杯半价！',
    content: '学校南门新开了家奶茶店，叫"星茶语"，今天去尝了尝他们家的芝士茉莉，味道不错，而且新店开业第一杯半价，大家可以去尝尝~',
    images: ['https://picsum.photos/id/42/200/200', 'https://picsum.photos/id/54/200/200'],
    createTime: '8小时前',
    viewCount: 478,
    likeCount: 124,
    commentCount: 36,
    tags: ['美食探店', '奶茶控']
  },
  {
    id: 6,
    userName: '匿名用户',
    userAvatar: 'https://picsum.photos/id/1005/200/200',
    isAnonymous: true,
    isFollowed: false,
    title: '找不到实习，好焦虑啊',
    content: '马上大三了，还没有找到暑期实习，简历都投了好多份，但是一直没有面试通知，好焦虑，学长学姐们有什么建议吗？',
    images: [],
    createTime: '12小时前',
    viewCount: 521,
    likeCount: 89,
    commentCount: 47,
    tags: ['实习求职', '求助']
  }
]);

// 刷新状态
const refreshTrigger = ref(false);

// 加载更多状态
const recommendHasMore = ref(true);
const followHasMore = ref(true);
const squareHasMore = ref(true);

// 加载状态
const recommendLoading = ref(false);
const followLoading = ref(false);
const squareLoading = ref(false);

// 切换标签
const switchTab = (index) => {
  currentTab.value = index;
};

// swiper切换事件
const swiperChange = (e) => {
  currentTab.value = e.detail.current;
};

// 调试函数 - 在控制台输出状态
const debugStatus = (type) => {
  console.log(`加载更多状态[${type}]:`, {
    recommendHasMore: recommendHasMore.value,
    recommendLoading: recommendLoading.value,
    postsLength: recommendPosts.value.length
  });
};

// 加载更多数据
const loadMoreRecommend = () => {
  console.log(`尝试加载更多 [recommended]`);

  // 如果已经没有更多数据或者正在加载中，则不执行
  if (!recommendHasMore.value || recommendLoading.value) {
    console.log('推荐已无更多数据或正在加载中，跳过加载');
    return;
  }

  // 设置加载状态
  recommendLoading.value = true;
  console.log('开始加载推荐数据...');

  // 模拟加载推荐数据
  setTimeout(() => {
    const newPost = {
      id: recommendPosts.value.length + 10,
      userName: '星遇用户' + (recommendPosts.value.length + 1),
      userAvatar: `https://picsum.photos/id/${1015 + recommendPosts.value.length}/200/200`,
      isAnonymous: false,
      title: '推荐内容-' + (recommendPosts.value.length + 1),
      content: '这是加载的推荐内容，序号：' + (recommendPosts.value.length + 1),
      images: ['https://picsum.photos/id/101/200/200'],
      createTime: Math.floor(Math.random() * 24) + '小时前',
      viewCount: Math.floor(Math.random() * 500),
      likeCount: Math.floor(Math.random() * 100),
      commentCount: Math.floor(Math.random() * 30)
    };
    recommendPosts.value.push(newPost);

    // 模拟数据加载完毕后设置状态
    recommendLoading.value = false;

    // 模拟当加载到一定数量时没有更多数据了
    if (recommendPosts.value.length > 6) {
      recommendHasMore.value = false;
      console.log('推荐数据已全部加载完毕');
    }

    // 输出调试信息
    debugStatus('recommended');
  }, 800);
};

// 加载更多数据
const loadMoreFollow = () => {
  console.log(`尝试加载更多 [following]`);

  // 如果已经没有更多数据或者正在加载中，则不执行
  if (!followHasMore.value || followLoading.value) return;

  // 设置加载状态
  followLoading.value = true;

  // 模拟加载关注数据 - 暂时注释掉自动加载，让用户看到空状态
  // 在实际项目中，这里应该调用API获取用户关注的人发布的帖子
  setTimeout(() => {
    // 模拟没有关注任何人的情况，保持空状态
    // 如果用户有关注的人，这里会从API获取数据

    // 设置加载状态
    followLoading.value = false;

    // 设置没有更多数据
    followHasMore.value = false;

    console.log('关注列表为空，显示空状态');
  }, 800);
};

// 加载更多数据
const loadMoreSquare = () => {
  console.log(`尝试加载更多 [square]`);

  // 如果已经没有更多数据或者正在加载中，则不执行
  if (!squareHasMore.value || squareLoading.value) return;

  // 设置加载状态
  squareLoading.value = true;

  // 模拟加载广场数据
  setTimeout(() => {
    const tagList = ['校园活动', '美食探店', '学习经验', '表白墙', '求职实习', '宿舍生活'];
    const newPost = {
      id: squarePosts.value.length + 30,
      userName: '星遇用户' + (squarePosts.value.length + 10),
      userAvatar: `https://picsum.photos/id/${1050 + squarePosts.value.length}/200/200`,
      isAnonymous: Math.random() > 0.7,
      title: '广场内容-' + (squarePosts.value.length + 1),
      content: '这是广场的随机内容，序号：' + (squarePosts.value.length + 1),
      images: Math.random() > 0.3 ? ['https://picsum.photos/id/' + (200 + squarePosts.value.length) + '/200/200'] : [],
      createTime: Math.floor(Math.random() * 24) + '小时前',
      viewCount: Math.floor(Math.random() * 600),
      likeCount: Math.floor(Math.random() * 150),
      commentCount: Math.floor(Math.random() * 50),
      tags: [tagList[Math.floor(Math.random() * tagList.length)]]
    };
    squarePosts.value.push(newPost);

    // 设置加载状态
    squareLoading.value = false;

    // 模拟当加载到一定数量时没有更多数据了
    if (squarePosts.value.length > 8) {
      squareHasMore.value = false;
    }
  }, 800);
};

// 刷新数据
const refreshData = (type) => {
  refreshTrigger.value = true;

  // 重置加载更多状态
  switch (type) {
    case 'recommended':
      recommendHasMore.value = true;
      break;
    case 'following':
      followHasMore.value = true;
      break;
    case 'square':
      squareHasMore.value = true;
      break;
  }

  setTimeout(() => {
    // 模拟刷新完成
    console.log('刷新完成：', type);
    refreshTrigger.value = false;

    // 实际项目中应该请求API
  }, 1000);
};

// 通用导航函数
const navigateTo = (url) => {
  uni.navigateTo({ url });
};

// 处理帖子点击事件
const handlePostClick = (post) => {
  navigateTo(`/pages/detail/post-detail?id=${post.id}`);
};

// 处理关注按钮点击事件
const handleFollowClick = (post) => {
  // 防抖处理
  if (Date.now() - lastClickTime.value < 300) return;
  lastClickTime.value = Date.now();

  // 切换关注状态
  post.isFollowed = !post.isFollowed;

  // 这里可以调用API更新关注状态
  console.log(`${post.isFollowed ? '关注' : '取消关注'}用户:`, post.userName);
};

// 处理话题标签点击事件
const handleTagClick = (tag) => {
  console.log('Tag clicked:', tag);
  // 可以跳转到话题页面或者筛选相关帖子
  // navigateTo(`/pages/topic/topic-detail?tag=${tag}`);
};

// 跳转到广场页面
const goToSquare = () => {
  // 防抖处理
  if (Date.now() - lastClickTime.value < 300) return;
  lastClickTime.value = Date.now();

  // 切换到广场tab（索引为2）
  switchTab(2);
};

// 防抖时间记录
const lastClickTime = ref(0);
</script>

<style lang="scss" scoped>
// 从uni.scss导入的颜色变量作为常量
$text-color: $uni-text-color;
$text-color-inverse: $uni-text-color-inverse;
$text-color-grey: $uni-text-color-grey;
$text-color-title: $uni-text-color-title;
$primary-color: $uni-color-primary;
$warning-color: $uni-color-warning;
$highlight-color: $uni-highlight-color;
$bg-color: $uni-bg-color;
$bg-color-grey: $uni-bg-color-grey;
$border-color: $uni-border-color;

.forum-page {
  height: 100vh; // 设置高度为100vh，而不是min-height
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden; // 防止内容溢出
  background-color: $bg-color-grey;
}

.bg-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700rpx;
  background: 
    /* 基础渐变层 */ linear-gradient(
      135deg,
      $primary-color 0%,
      rgba($primary-color, 0.8) 40%,
      rgba($warning-color, 0.6) 60%,
      rgba($warning-color, 0.3) 80%,
      rgba($warning-color, 0) 100%
    ),
    /* 波浪层1 - 左侧 */ radial-gradient(ellipse at 20% 70%, rgba($warning-color, 0.5) 0%, rgba($warning-color, 0) 60%),
    /* 波浪层2 - 右侧 */ radial-gradient(circle at 80% 40%, rgba($primary-color, 0.6) 0%, rgba($primary-color, 0) 50%),
    /* 波浪层3 - 中下部 */ radial-gradient(ellipse at 50% 90%, rgba($highlight-color, 0.4) 0%, rgba($highlight-color, 0) 70%);
  z-index: 0;
  /* 像素风格边缘 */
  mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
  mask-size: 100% 100%, 100% 16px;
  mask-position: 0 0, 0 bottom;
  mask-repeat: no-repeat;
}

.tab-wrapper {
  position: relative; // 改为相对定位
  z-index: 10;
  background-color: rgba($bg-color-grey, 0.9); // 修改背景色为浅灰色
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding: 10rpx 20rpx; // 增加顶部内边距和左右内边距
  backdrop-filter: blur(10px); // 添加模糊效果
  width: calc(100% - 40rpx); // 宽度减去左右内边距
  margin: 0rpx auto 15rpx; // 水平居中
  border-radius: 16rpx; // 圆角边框

  .tab-content {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;

    .tab-item {
      position: relative;
      padding: 10rpx 20rpx;
      font-size: 32rpx;
      transition: all 0.3s;

      &.active {
        color: $primary-color;
        font-weight: bold;

        &::after {
          content: '';
          position: absolute;
          bottom: -8rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 6rpx;
          background: linear-gradient(135deg, $primary-color, $warning-color);
          border-radius: 3rpx;
        }
      }
    }
  }
}

.hot-topics-wrapper {
  padding: 0 16rpx 20rpx; // 调整内边距
  background-color: rgba($bg-color, 0.9); // 统一的白色半透明背景
  border-radius: 16rpx; // 统一圆角
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); // 轻微阴影
  z-index: 10;
  position: relative;
  margin-bottom: 10rpx;

  .topic-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 20rpx 16rpx; // 调整内边距
    border-bottom: 1px solid rgba($border-color, 0.3);

    .topic-title {
      font-size: 28rpx;
      font-weight: bold;
      color: $text-color-title;
      position: relative;
      padding-left: 16rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 28rpx;
        background: linear-gradient(to bottom, $primary-color, $warning-color);
        border-radius: 3rpx;
      }
    }

    .topic-more {
      display: flex;
      align-items: center;
      color: $primary-color;
      font-size: 22rpx;

      tn-icon {
        margin-left: 4rpx;
      }
    }
  }

  .topic-grid-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 16rpx; // 内边距
  }

  .topic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12rpx;
    width: 100%;
  }

  .topic-grid-item {
    position: relative;
    height: 140rpx;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);

    .topic-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .topic-info {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 6rpx 8rpx;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
      z-index: 2;

      .topic-name {
        display: block;
        font-size: 24rpx;
        font-weight: bold;
        color: #ffffff;
        margin-bottom: 2rpx;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      }

      .topic-count {
        display: block;
        font-size: 20rpx;
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }
}

.content-container {
  flex: 1;
  position: relative;
  z-index: 5;
  padding: 0 20rpx;
  overflow: hidden;
}

.content-swiper {
  height: 100%;
  width: 100%;

  .swiper-item {
    height: 100%;

    .scroll-view {
      height: 100%;
      padding-bottom: 100rpx;
    }
  }
}

// 热门话题样式
.hot-topics {
  .topic-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #5c7c9f;
    margin-bottom: 16rpx;
  }

  .topic-list {
    .topic-tag {
      background-color: #fff3c2;
      color: #5c7c9f;
      border: 1rpx solid #a3d2e6;
      margin-right: 16rpx;
      margin-bottom: 12rpx;
    }
  }
}

// 空状态样式
.empty-state {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fc; // 淡云白背景
  padding: 40rpx;
  border-radius: 16rpx;

  .empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 500rpx;
  }

  .empty-icon {
    margin-bottom: 40rpx;

    .pixel-heart {
      position: relative;
      width: 120rpx;
      height: 100rpx;

      .heart-row {
        position: absolute;
        background-color: #a3d2e6; // 雾湖蓝
        border-radius: 2rpx; // 像素风格的轻微圆角

        &.heart-row-1 {
          top: 20rpx;
          left: 30rpx;
          width: 20rpx;
          height: 20rpx;
        }

        &.heart-row-2 {
          top: 20rpx;
          left: 70rpx;
          width: 20rpx;
          height: 20rpx;
        }

        &.heart-row-3 {
          top: 40rpx;
          left: 20rpx;
          width: 80rpx;
          height: 20rpx;
        }

        &.heart-row-4 {
          top: 60rpx;
          left: 30rpx;
          width: 60rpx;
          height: 20rpx;
        }

        &.heart-row-5 {
          top: 80rpx;
          left: 50rpx;
          width: 20rpx;
          height: 20rpx;
        }
      }
    }
  }

  .empty-text {
    margin-bottom: 50rpx;

    .empty-title {
      display: block;
      font-size: 36rpx;
      font-weight: 600;
      color: #5c7c9f; // 雾蓝色
      margin-bottom: 16rpx;
      font-family: 'Quicksand', sans-serif;
    }

    .empty-desc {
      display: block;
      font-size: 28rpx;
      color: #6d6d6d; // 暖灰色
      line-height: 1.5;
      font-family: 'Quicksand', sans-serif;
    }
  }

  .empty-action {
    .guide-button {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff3c2; // 浅鹅黄背景
      border: 2rpx solid #a3d2e6; // 雾湖蓝边框
      border-radius: 12rpx;
      padding: 24rpx 40rpx;
      box-shadow: 0 4rpx 12rpx rgba(163, 210, 230, 0.2); // 浅蓝投影
      transition: all 0.3s ease;

      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 8rpx rgba(163, 210, 230, 0.3);
        background-color: #ffeedb; // 奶油霜色
      }

      .button-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #5c7c9f; // 雾蓝色文字
        margin-right: 12rpx;
        font-family: 'Quicksand', sans-serif;
      }

      .button-icon {
        font-size: 28rpx;
        color: #a3d2e6; // 雾湖蓝图标
        font-weight: bold;
        transform: translateX(0);
        transition: transform 0.3s ease;
      }

      &:hover .button-icon {
        transform: translateX(4rpx);
      }
    }
  }
}
</style>
